AngularJS Scope
Scope என்பது HTML (வியூ) மற்றும் JavaScript (கன்ட்ரோலர்) க்கு இடையேயான பைண்டிங் பகுதியாகும்.
Scope என்பது கிடைக்கும் properties மற்றும் methods கொண்ட ஒரு object ஆகும்.
Scope வியூ மற்றும் கன்ட்ரோலர் இரண்டிற்கும் கிடைக்கும்.
முக்கிய கருத்து:
Scope ஒரு JavaScript object ஆகும், இது வியூ மற்றும் கன்ட்ரோலருக்கு இடையே தரவு பகிர்வை சாத்தியமாக்குகிறது.
Scope ஐ எவ்வாறு பயன்படுத்துவது?
நீங்கள் AngularJS இல் ஒரு கன்ட்ரோலரை உருவாக்கும்போது, $scope object ஐ ஒரு argument ஆக பாஸ் செய்கிறீர்கள்:
எடுத்துக்காட்டு
கன்ட்ரோலரில் உருவாக்கப்பட்ட properties, வியூவில் குறிப்பிடப்படலாம்:
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>JavaScript:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>கன்ட்ரோலரில் $scope object க்கு properties சேர்க்கும்போது, வியூவுக்கு (HTML) இந்த properties க்கு அணுகல் கிடைக்கும்.
வியூவில், நீங்கள் $scope prefix ஐ பயன்படுத்துவதில்லை, நீங்கள் ஒரு property name ஐ மட்டுமே குறிப்பிடுகிறீர்கள், {{carname}} போன்று.
Scope ஐ புரிந்துகொள்வது
ஒரு AngularJS ஆப்ளிகேஷன் பின்வருவனவற்றைக் கொண்டுள்ளது என்று நாம் கருதினால்:
வியூ (View)
HTML உள்ளடக்கம்
மாடல் (Model)
தற்போதைய வியூவுக்கு கிடைக்கும் தரவு
கன்ட்ரோலர் (Controller)
தரவை உருவாக்குகிற/மாற்றுகிற/நீக்குகிற/கட்டுப்படுத்தும் JavaScript function
பின்னர் scope தான் மாடல் ஆகும்.
Scope என்பது properties மற்றும் methods கொண்ட ஒரு JavaScript object ஆகும், இது வியூ மற்றும் கன்ட்ரோலர் இரண்டிற்கும் கிடைக்கும்.
எடுத்துக்காட்டு
நீங்கள் வியூவில் மாற்றங்களைச் செய்தால், மாடல் மற்றும் கன்ட்ரோலர் புதுப்பிக்கப்படும்:
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>JavaScript:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>உங்கள் Scope ஐ அறிந்துகொள்ளுங்கள்
எந்த நேரத்திலும் நீங்கள் எந்த scope உடன் வேலை செய்கிறீர்கள் என்பதை அறிவது முக்கியமானது.
மேலே உள்ள இரண்டு எடுத்துக்காட்டுகளில் ஒரே ஒரு scope மட்டுமே உள்ளது, எனவே உங்கள் scope ஐ அறிவது ஒரு பிரச்சனை அல்ல, ஆனால் பெரிய ஆப்ளிகேஷன்களுக்கு HTML DOM இல் சில பிரிவுகள் மட்டுமே சில குறிப்பிட்ட scopes க்கு அணுக முடியும்.
எடுத்துக்காட்டு
ng-repeat டைரக்டிவ் உடன் வேலை செய்யும்போது, ஒவ்வொரு மறு செய்கையும் தற்போதைய மறு செய்கை object க்கு அணுகல் உள்ளது:
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>JavaScript:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>ஒவ்வொரு <li> உறுப்புக்கும் தற்போதைய மறு செய்கை object க்கு அணுகல் உள்ளது, இந்த விஷயத்தில் ஒரு சரம், இது x ஐப் பயன்படுத்தி குறிப்பிடப்படுகிறது.
ரூட் Scope
அனைத்து ஆப்ளிகேஷன்களுக்கும் ஒரு $rootScope உள்ளது, இது ng-app டைரக்டிவ் கொண்ட HTML உறுப்பில் உருவாக்கப்பட்ட scope ஆகும்.
ரூட்Scope முழு ஆப்ளிகேஷனிலும் கிடைக்கும்.
ஒரு மாறி தற்போதைய scope மற்றும் rootScope இரண்டிலும் ஒரே பெயரைக் கொண்டிருந்தால், ஆப்ளிகேஷன் தற்போதைய scope இல் உள்ள ஒன்றைப் பயன்படுத்துகிறது.
எடுத்துக்காட்டு
"color" என்ற பெயரில் ஒரு மாறி கன்ட்ரோலரின் scope மற்றும் rootScope இரண்டிலும் உள்ளது:
HTML:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>JavaScript:
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
$scope.color = "red";
});
</script>
</body>Scope முன்னுரிமை:
ஒரே பெயரில் மாறிகள் இருக்கும் போது, தற்போதைய லோக்கல் scope மாறிகள் global rootScope மாறிகளை மீறுகின்றன. இது scope சங்கிலியின் ஒரு முக்கிய அம்சமாகும்.
Scope படிநிலை
| Scope வகை | வரையறை | அணுகல் | எடுத்துக்காட்டு |
|---|---|---|---|
| $rootScope | Global scope | முழு ஆப்ளிகேஷனிலும் | $rootScope.color = 'blue' |
| Controller Scope | Local scope | கன்ட்ரோலர் உள்ளே மட்டும் | $scope.color = 'red' |
| ng-repeat Scope | Iteration scope | ஒவ்வொரு மறு செய்கைக்கும் | ng-repeat="x in names" |
| Directive Scope | Isolated scope | டைரக்டிவ் உள்ளே மட்டும் | scope: { ... } in directives |
பயிற்சிகள் மூலம் கற்றல்
AngularJS இல் $scope object இன் முக்கிய பங்கு என்ன?
Scope சிறந்த நடைமுறைகள்
Minimal Scope Usage
முடிந்தவரை குறைந்த எண்ணிக்கையிலான properties மட்டுமே $scope இல் சேர்க்கவும்
Avoid Direct DOM Manipulation
$scope இல் நேரடியாக DOM கையாளுதல் செய்யக்கூடாது
Watch Usage குறைக்கவும்
அதிகமான $scope.$watch() calls செயல்திறனை பாதிக்கும்
Use ControllerAs Syntax
நவீன AngularJS இல் ControllerAs syntax பயன்படுத்தவும்
Clear Scope Names
Scope variables க்கு தெளிவான மற்றும் பொருளுள்ள பெயர்களை வழங்கவும்
Scope பயன்பாடுகள்
Two-way Data Binding
வியூ மற்றும் கன்ட்ரோலருக்கு இடையே தானியங்கி தரவு ஒத்திசைவு
Event Handling
பயனர் நிகழ்வுகளைக் கையாளுதல் மற்றும் பதிலளித்தல்
Data Filtering
வியூவுக்கு முன் தரவை வடிகட்டுதல் மற்றும் வடிவமைத்தல்
Real-time Updates
தரவு மாற்றங்களின் உடனடி பிரதிபலிப்பு